<template>
  <div>
    <van-search
      v-model="search"
      class="my-nav"
      placeholder="请输入采样人员名称"
      @search="onSearch"
      @cancel="onCancel"
      @blur="onCancel"
    />
    <div class="page_space">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-checkbox-group ref="checkboxGroupOfPerson" v-model="selectList">
          <base-card
            v-for="(item, index) in list"
            :key="index"
            class="mt-15"
            :title="item.name"
            :data="item.data"
            arrow
            @click="goto('/person-details?id=' + item.id)"
          >
            <template #header>
              <div @click.stop>
                {{ item.checked }}
                <van-checkbox
                  :name="item.id"
                  checked-color="#2163E0"
                  shape="square"
                  class="mr-10"
                ></van-checkbox>
              </div>
            </template>
          </base-card>
        </van-checkbox-group>
      </van-list>
    </div>

    <div class="btn_wrap">
      <div class="tip">
        <p>
          已选择<span class="count">{{ selectList.length }}项</span>
        </p>
        <p
          v-if="selectList.length !== list.length"
          class="all"
          @click="selectAll(true)"
        >
          全选本页
        </p>
        <p v-else class="all danger" @click="selectAll()">取消全选</p>
      </div>
      <button class="btn small default" @click="cancelPitch">取消</button>
      <button
        :class="params.enabled ? 'btn small danger' : 'btn small'"
        @click="toHandle(params.enabled)"
      >
        {{ params.enabled ? '停用' : '启用' }}
      </button>
    </div>
  </div>
</template>

<script>
import baseCard from '@/components/base-card'
import { getPerson, enableOrDisableOfBatch } from '@/api/person'
export default {
  name: 'managePerson',
  components: { baseCard },
  data() {
    return {
      search: '',
      checked: true,
      loading: false,
      finished: false, // 触底加载结束
      params: {
        limit: 10,
        page: 1,
        enabled: true,
        name: ''
      },
      list: [],
      selectList: []
    }
  },
  created() {
    this.params.enabled = JSON.parse(this.$route.query.enabled)
  },
  methods: {
    // 删除
    async toHandle(enabled) {
      if (this.selectList.length === 0) {
        this.$toast('至少选择一项')
        return false
      }
      let selectListOfName = []
      this.selectList.forEach((id) => {
        let o = this.list.find((item) => item.id === id)
        if (o) {
          selectListOfName.push(o.name)
        }
      })
      let title = enabled ? '确定停用？' : '确定启用?'
      this.$dialog
        .alert({
          title,
          message: selectListOfName.join(','),
          showCancelButton: true
        })
        .then(async () => {
          let selectListStr = this.selectList.join(',')
          const { code } = await enableOrDisableOfBatch(selectListStr)
          if (code === '0') {
            this.$toast.success('操作成功')
            this.list = []
            this.selectList = []
            this.params.page = 1
            this.getList(this.params)
          }
        })
        .catch(() => {
          // on cancel
        })
    },
    // 取消选中
    cancelPitch() {
      this.$router.go(-1)
    },
    // 当前页 全选
    selectAll(allSelect) {
      // 取消全选
      if (allSelect) {
        this.$refs.checkboxGroupOfPerson.toggleAll(true)
      } else {
        this.$refs.checkboxGroupOfPerson.toggleAll()
      }
      console.log(this.selectList)
    },
    // 选中人员
    pitchPerson(e, id) {
      let exit = this.selectList.findIndex((item) => item === id)
      if (e) {
        // true
        this.selectList.push(id)
      } else {
        if (exit !== -1) this.selectList.splice(exit, 1)
      }
    },
    onSearch(val) {
      this.search = val.trim()
      this.params.name = this.search
      this.params.page = 1
      this.list = []
      this.getList(this.params)
    },
    onCancel() {
      this.search = ''
      this.params.name = ''
      this.params.page = 1
      this.list = []
      this.getList(this.params)
    },
    onClick(name, title) {
      if (title === '已启用') {
        this.params.enabled = true
      } else {
        this.params.enabled = false
      }
      this.list = []
      this.params.page = 1
      this.getList(this.params)
    },
    // 触底加载
    onLoad() {
      this.getList(this.params)
    },
    // 选择采样人员
    async getList(params) {
      const res = await getPerson(params)
      if (res.code === '0') {
        res.data.content.forEach((item) => {
          this.list.push({
            name: item.name,
            id: item.id,
            data: [
              {
                key: '所属区划',
                value: item.allAreaName,
                checked: false
              },
              {
                key: '人员编号',
                value: item.code,
                checked: false
              }
            ]
          })
        })
        // 加载状态结束
        this.loading = false
        this.params.page++
        // 数据全部加载完成
        if (res.data.last) {
          this.finished = true
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.my-nav {
  position: sticky;
  top: 0;
  z-index: 999;
}
.btn_wrap {
  .tip {
    font-family: PingFang SC Medium;
    font-size: 14px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0px;
    /* 粤商通/常规黑色 */
    color: #171819;
    .count {
      /* 粤商通/常规蓝色 */
      color: #2163e0;
      margin-left: 5px;
    }
    .all {
      color: #b2b8bd;
      margin-top: 6px;
      &.danger {
        color: #ff5454;
      }
    }
  }
}
</style>
